/**
 * Created by huotaol on 2017/5/11.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Text, TouchableOpacity, View} from "react-native";
import {Actions} from "react-native-router-flux";
import Gallery from "react-native-gallery";
import CustomStyle from "../../../common/style/CustomStyle";


export default class CheckGallery extends Component {

    static propTypes = {
        picList: PropTypes.array,
    };

    // 构造
    constructor(props) {
        super(props);
        const picList = [];
        const titleList = [];
        this.props.picList.map(item => {
            picList.push(item.uri);
            titleList.push(item.title);
        });
        console.log('CheckGallery title ' + titleList);
        console.log('CheckGallery pic ' + picList);
        // 初始状态
        this.state = {
            title: titleList.length ? titleList[0] : '',
            picList,
            titleList,
        };
    }

    componentDidMount() {
    }

    render() {
        return (
            <View style={{flex: 1, backgroundColor: 'black'}}>
                <Gallery
                    style={{flex: 1, backgroundColor: 'black'}}
                    images={this.state.picList}
                    onPageSelected={page => {
                        this.setState({title: this.state.titleList[page]});
                    }}
                />

                <View
                    style={[, {
                        position: 'absolute',
                        left: 0,
                        top: CustomStyle.navBasePaddingTop + CustomStyle.getActualSizeInVertical(100),
                        width: CustomStyle.screenWidth,
                        alignItems: 'center',
                    }]}
                >
                    <Text
                        style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(30),
                            color: 'red',
                            marginTop: CustomStyle.getActualSizeInVertical(10),
                        }]}>{this.state.title}</Text>
                </View>
                <TouchableOpacity
                    style={[, {
                        position: 'absolute',
                        left: CustomStyle.getActualSizeInHorizontal(20),
                        top: CustomStyle.navBasePaddingTop + CustomStyle.getActualSizeInVertical(20),
                    }]}
                    onPress={() => {
                        Actions.pop();
                    }}
                >
                    <Image source={require('../../../img/cardetail/back.png')}
                           resizeMode={'contain'}
                           style={{
                               width: CustomStyle.getActualSizeInHorizontal(60),
                               height: CustomStyle.getActualSizeInVertical(60),
                           }}/>
                </TouchableOpacity>

            </View>
        );
    }
}